<template>
	<view class='main-container'>
		<view style="width: 100;height: 30upx;"></view>
		<!-- 添加二手物品表单开始 -->
		<view class='form'>
			<view class='form-item'>
				<view class='tishi'>标题</view>
				<input type='text' v-model="goodsName" placeholder='输入商品的标题(15字以内)'></input>
			</view>
			<view class='form-item'>
				<view class='tishi'>价格</view>
				<input type='digit' v-model="goodsPrice" placeholder='输入商品的价格(0.0)'></input>
				<view class="jiage">元</view>
			</view>
			<view class='form-item'>
				<view class='tishi'>分类</view>
				<picker @change="categotyChange" :value="index" :range="categorys" range-key="goodsTypeName">
					<view class="picker">
						{{categorys[index].goodsTypeName}}
					</view>
				</picker>
			</view>
			<!-- 图片上传区开始 -->
			<textarea placeholder='输入商品的描述信息' maxlength="150" v-model="goodsDesc" show-confirm-bar="false">

    </textarea>
			<view class='upload'>
				<view>上传图片(仅限1张)</view>
				<image src='../../static/images/addimg.png' @tap="chooseImg()"></image>
				<image :src='goodsImgUrl' @tap="prveImg"></image>
			</view>
		</view>
		<view @tap='addGoods' :class='btn'>
			发布二手
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js"
	export default {
		onLoad() {
			let that = this;
			let categorys = uni.getStorageSync("categorys")||[];
			if(categorys.length==0) {
				utils.get("market/list", {}, function(data) {
					that.categorys = data;
					uni.setStorageSync("categorys",data);
				});
			}else{
				this.categorys =  categorys
			}
			
		},
		computed: {
			...mapState(['user']),
			btn() {
				if (this.judge()) {
					return "btns";
				}
				return "btns dis";
			}
		},
		data() {
			return {
				index: 0,
				categorys: [],
				goodsName: '',
				goodsDesc: '',
				goodsPrice: 0,
				goodsImgUrl:''

			}
		},
		methods: {
			...mapMutations(['setGoodsChange']),
			chooseImg(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						that.goodsImgUrl = res.tempFilePaths[0];
					}
				});
			},
			prveImg(){
				uni.previewImage({
					urls:[this.goodsImgUrl]
				})
			},
			categotyChange(e) {
				this.index = e.detail.value;
			},
			addGoods() {
				if (this.judge()) {
					if (this.user.phone == null || this.user.phone.length == 0) {
						uni.showModal({
							title: '通知提醒',
							content: '你当前未绑定手机号,点确定绑定手机号',
							showCancel: true,
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../verificationcode/verificationcode"
									})
								} else {
									return;
								}
							}
						});
						return;
					}
					utils.loading("发布中...");
					let token = uni.getStorageSync('token')||[];
					let pathurl = utils.baseUrl+"market/add";
					let type = parseInt(this.index) +1;
					let that = this;
					//下面是上传到服务器的方法
					uni.uploadFile({
						url: pathurl,
						filePath: this.goodsImgUrl,
						header: {
							token: token
						},
						formData:{
							userId:this.user.id,
							goodsName:this.goodsName,
							goodsPrice:this.goodsPrice,
							goodsDesc:this.goodsDesc,
							goodsTypeId:type
						},
						name: 'image',
						success: res => {
							res = res.data;
							res = JSON.parse(res);
							utils.hideLoading();
							if (res.code == 0) {
								that.setGoodsChange({
									goodsChange:true
								})
								uni.navigateBack({
									delta: 1,
									animationType:"slide-out-bottom"
								});
						
							} else {
								utils.errorToast(res.errMsg);
							}
						},
						fail: err => {
							utils.errorToast("网络连接失败");
						},
						complete: () => {}
					});
				}
			},
			judge() {
				if (this.goodsName.length == 0) {
					return false;
				}
				if (this.goodsDesc == 0) {
					return false;
				}
				if (this.goodsPrice == 0) {
					return false;
				}
				if (this.goodsImgUrl == 0) {
					return false;
				}
				return true;
			}

		}
	}
</script>

<style>
	page {
		font-family: Arial, Helvetica, 'Microsoft YaHei';
		background-color: #f6f6f6;
	}

	.main-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 100upx;
	}

	.form .form-item {
		width: 100%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: white;
		margin-bottom: 20upx;
	}

	.form .form-item .tishi {
		width: 150upx;
		height: 100upx;
		font-size: 27upx;
		line-height: 100upx;
		text-align: center;
		box-shadow: inset -1px 0px 1px -1px #c8c7cc;
	}

	.form .form-item input {
		flex: 1;
		font-size: 28upx;
		padding-left: 25upx;
	}

	.form .form-item picker {
		flex: 1;
		font-size: 30upx;
		padding-left: 25upx;
	}

	.jiage {
		font-size: 30upx;
		width: 100upx;
		height: 100upx;
		color: red;
		text-align: center;
		line-height: 100upx;
	}

	.form textarea {
		background-color: white;
		width: 710upx;
		height: 240upx;
		padding: 20upx;
		margin-bottom: 30upx;
		font-size: 34upx;
		font-family: 'FangSong';
	}

	.upload {
		height: 230upx;
		width: 100%;
		background-color: white;
	}

	.upload view {
		height: 50upx;
		line-height: 50upx;
		/* background-color: #f7f7f7; */
		padding-left: 30upx;
		width: 100%;
		font-size: 25upx;
	}

	.upload image {
		width: 170upx;
		height: 170upx;
		margin-left: 30upx;
	}

	.btns {
		width: 100%;
		height: 110upx;
		line-height: 110upx;
		background: linear-gradient(to left, #fa4dbe 0, #fbaa58 100%);
		font-size: 30upx;
		text-align: center;
		color: white;
		position: fixed;
		bottom: 0;
	}

	.dis {
		opacity: 0.3;
	}
</style>
